import { computed, ref, unref } from 'vue'
import type { MenuSetting } from '@/types/config'

import { useAppStore } from '@/store/modules/app'

import { SIDE_BAR_MINI_WIDTH } from '@/enums/appEnum'
import { useFullContent } from '@/hooks/web/useFullContent'

const mixSideHasChildren = ref(false)

export function useMenuSetting() {
  const { getFullContent: fullContent } = useFullContent()
  const appStore = useAppStore()

  const getShowHeader = computed(() => appStore.getHeaderSetting.show)

  const getCollapsed = computed(() => appStore.getMenuSetting.collapsed)

  const getMenuHidden = computed(() => appStore.getMenuSetting.hidden)

  const getMenuWidth = computed(() => appStore.getMenuSetting.menuWidth)

  const getShowSidebar = computed(() => {
    return !unref(fullContent)
  })

  const getMiniWidthNumber = computed(() => {
    const { siderHidden } = appStore.getMenuSetting
    return siderHidden ? 0 : SIDE_BAR_MINI_WIDTH
  })

  const getRealWidth = computed(() => {
    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth)
  })

  const getCalcContentWidth = computed(() => {
    return unref(getShowHeader) ? `calc(100% - ${unref(getRealWidth)}px)` : '100%'
  })

  // Set menu configuration
  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
    appStore.setMenuSetting(menuSetting)
  }

  function toggleCollapsed() {
    setMenuSetting({
      collapsed: !unref(getCollapsed),
    })
  }
  return {
    setMenuSetting,

    toggleCollapsed,

    getRealWidth,
    getCollapsed,
    getMiniWidthNumber,
    getCalcContentWidth,
    getMenuWidth,
    getMenuHidden,
    getShowSidebar,
    mixSideHasChildren,
  }
}
